<!-- 我的课程评价 -->
<template>
    <div class="my-comment-container">
        <h2 class="comment-header">我发表的评价</h2>
        <template v-if="questionList && questionList.length">
            <div v-for="item in questionList" :key="item.id">
                <component 
                    :is="componentMap[item.questionType]"
                    page-type="detail"
                    :id="item.id"
                    :title="item.title"
                    :content="item.content"
                    :is-must="item.isMust"
                    :user-answer-list="item.userAnswerList"/>
            </div>
        </template>
    </div>
</template>

<script setup>
import ScCompare from './sc-compare.vue';
import ShortTopic from './short-topic';
import { ref, watch } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    }
})

let questionList = ref([]);

const componentMap = {
    7: ScCompare, // 量表组合题
    // 6: ScaleChoice, // 量表单选题
    // 5: UploadTopic, // 上传题
    // 3: FillTopic, // 填空题
    // 9: FillTopic, // 填空题
    // 2: MultipleChoice, // 多选题
    // 1: SingleChoice, // 单选题
    8: ShortTopic // 简答
};

watch(() => props.data, (newVal) => {
    questionList.value = newVal.questionList;
}, {
    immediate: true,
    deep: true
})
</script>

<style lang="scss" scoped>
.my-comment-container {
    .comment-header {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: var(--srt-color-black);
    }
}
</style>